<template>
  <div>
    <el-main style="background: #fff">
      <div class="el-row is-align-middle el-row--flex"
           width='100%'>
        <div class="form-wrapper"
             style="margin-right: 10px; width: 300px">
          <el-input v-model="seachid"
                    placeholder="广告主 ID"
                    size="small"
                    class="select-wrapper"
                    filterable
                    @change="chuanid"
                    style="margin-right: 15px">
          </el-input>
        </div>
        <div class="form-wrapper"
             style="margin-right: 10px">
          <!-- <span class="filter-label">时间：</span> -->
          <el-date-picker v-model="seachtime"
                          size="small"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd"
                          align="right"
                          :clearable="false"
                          @change="fenzutime">
          </el-date-picker>
        </div>
        <div class="form-wrapper"
             style="margin-right: 10px; width: 300px;height:32px;">
          <el-select v-model="typeval"
                     filterable
                     placeholder="请选择"
                     size="small"
                     clearable
                     @change="typechange">
            <el-option v-for="item in typelist"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="form-wrapper">
          <el-button data-v-6a3b3888=""
                     class="el-button--primary el-button"
                     style="float: left"
                     size="small"
                     @click="chaxun"><i class="el-icon-search"></i><span> 查询搜索 </span></el-button>
        </div>
        <div class="form-wrapper"
             style="width: 650px">
          <span style="margin-left: 20px; color: red">更新时间：{{ newtime }}</span>
        </div>
        <div class="chartsWrap">
          <el-button size="small"
                     type="primary"
                     @click="costDialogFormVisible = true">数据分析</el-button>
          <el-dialog title="数据趋势"
                     :modal-append-to-body="false"
                     :visible.sync="costDialogFormVisible"
                     @open="opened()"
                     append-to-body>
            <div id="costmain"
                 style="width: 900px; height: 500px; padding-top: 40px"></div>
          </el-dialog>
        </div>
        <el-dropdown :hide-on-click="false"
                     class="right">
          <el-button type="primary"
                     icon="el-icon-s-operation"
                     class="zd"
                     style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                ">自定义列表</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-scrollbar style="height: 60vh"
                          width="200px">
              <el-checkbox-group v-model="check">
                <el-dropdown-item v-for="(item, index) in checkList"
                                  :key="index">
                  <el-checkbox :label="item"
                               :key="item"></el-checkbox>
                </el-dropdown-item>
              </el-checkbox-group>
            </el-scrollbar>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-table :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
                border
                stripe
                :header-cell-style="{
          'text-align': 'center',
          background: 'rgb(84, 92, 100)',
          color: '#666',
          color: '#fff',
        }"
                style="width: 100%"
                v-if="have">
        <el-table-column prop="advertiser_id"
                         label="广告主 id"
                         align="center"
                         width="140px"
                         fixed>
        </el-table-column>
        <el-table-column prop="account"
                         label="账户"
                         align="center"
                         fixed
                         width="140px"
                         style="background-color: #409eff; color: #fff"
                         class="touchback">
          <template slot-scope="scope">
            <router-link :to="'/details?code=' + `${scope.row.account_id}` + '&gid=' + `${scope.row.gid}` + '&type=' + `${scope.row.type_id}`"
                         class="touch">{{ scope.row.account }}</router-link>
            <!-- <button @click='watch(scope)'>点击</button> -->
          </template>
        </el-table-column>
        <el-table-column prop="add_time"
                         label="添加时间"
                         align="center"
                         fixed
                         width="140px">
        </el-table-column>
        <el-table-column prop="type_id"
                         label="平台"
                         align="center"
                         width="140px"
                         fixed>
          <template slot-scope="scope">
            <div class="icons"
                 v-if="(scope.row.type_id == '京东')">
              <img src="../assets/jd.png"
                   alt="" />京东
            </div>
            <div class="icons"
                 v-if="(scope.row.type_id == '淘宝')">
              <img src="../assets/tb.png"
                   alt="" />淘宝
            </div>
            <div class="icons"
                 v-if="(scope.row.type_id == '拼多多')">
              <img src="../assets/pdd.png"
                   alt="" />拼多多
            </div>
          </template>

        </el-table-column>
        <el-table-column v-for="item in lists"
                         :key="Math.random()"
                         :prop="item.prop"
                         :label="item.label"
                         v-if="item.ispass">
        </el-table-column>
      </el-table>
      <el-row type="flex"
              justify="end"
              style="margin-top: 20px">
        <el-pagination background
                       layout="prev, pager, next"
                       :page-size="pagesize"
                       :current-page="currentPage"
                       :total="pagetotal"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </el-row>
    </el-main>
    <div class="dont">
      <el-empty description="暂时没有数据"
                v-if="dont"></el-empty>
    </div>
  </div>
</template>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  padding: 0;
}

.el-aside {
  color: #333;
}
</style>

<script>
import * as echarts from 'echarts';
import Sortable from "sortablejs";
export default {
  data () {
    return {
      costDialogFormVisible: false,
      tableData: [],
      pagesize: 10,
      pagetotal: 10,
      currentPage: 1,
      type_id: '',
      order_sta: '',
      typeval: '',
      have: true,
      stat_time: "",
      end_time: "",
      dont: false,
      newtime: "",
      check: [
        "素材曝光数",
        "花费（元）",
        "转化数",
        "转化率",
        "付费次数",
        "付费金额",
        "ROI",
      ],
      checkList: [
        "素材曝光数",
        "花费（元）",
        "转化数",
        "转化率",
        "付费次数",
        "付费金额",
        "ROI",
        "平均行为单价（元）",
        "行为率",
        "行为数",
        "转化成本",
        "付款成功数",
        "付款成功金额",
        "平均千次曝光花费（元）",
        "封面点击数",
        "平均点击单价（元）",
        "封面点击率",
        "3s 播放率",
        "封面曝光数",
      ],
      col: [
        {
          label: "素材曝光数",
          prop: "aclick",
          ispass: true,
        },
        {
          label: "花费（元）",
          prop: "charge",
          ispass: true,
        },
        {
          label: "转化数",
          prop: "conversion_num",
          ispass: true,
        },
        {
          label: "转化率",
          prop: "conversion_ratio",
          ispass: true,
        },
        {
          label: "付费次数",
          prop: "event_pay",
          ispass: true,
        },
        {
          label: "付费金额",
          prop: "event_pay_purchase_amount",
          ispass: true,
        },
        {
          label: "ROI",
          prop: "event_pay_roi",
          ispass: true,
        },
        {
          label: "平均行为单价（元）",
          prop: "action_cost",
          ispass: false,
        },
        {
          label: "行为率",
          prop: "action_ratio",
          ispass: false,
        },
        {
          label: "行为数",
          prop: "bclick",
          ispass: false,
        },
        {
          label: "转化成本",
          prop: "conversion_num_cost",
          ispass: false,
        },
        {
          label: "付款成功数",
          prop: "event_order_paid",
          ispass: false,
        },
        {
          label: "付款成功金额",
          prop: "event_order_paid_purchase_amount",
          ispass: false,
        },
        {
          label: "平均千次曝光花费（元）",
          prop: "impression_1k_cost",
          ispass: false,
        },
        {
          label: "封面点击数",
          prop: "photo_click",
          ispass: false,
        },
        {
          label: "平均点击单价（元）",
          prop: "photo_click_cost",
          ispass: false,
        },
        {
          label: "封面点击率",
          prop: "photo_click_ratio",
          ispass: false,
        },
        {
          label: "3s 播放率",
          prop: "play_3s_ratio",
          ispass: false,
        },
        {
          label: "封面曝光数",
          prop: "show",
          ispass: false,
        },
      ],
      dropCol: [
        {
          label: "素材曝光数",
          prop: "aclick",
          ispass: true,
        },
        {
          label: "花费（元）",
          prop: "charge",
          ispass: true,
        },
        {
          label: "转化数",
          prop: "conversion_num",
          ispass: true,
        },
        {
          label: "转化率",
          prop: "conversion_ratio",
          ispass: true,
        },
        {
          label: "付费次数",
          prop: "event_pay",
          ispass: true,
        },
        {
          label: "付费金额",
          prop: "event_pay_purchase_amount",
          ispass: true,
        },
        {
          label: "ROI",
          prop: "event_pay_roi",
          ispass: true,
        },
        {
          label: "平均行为单价（元）",
          prop: "action_cost",
          ispass: false,
        },
        {
          label: "行为率",
          prop: "action_ratio",
          ispass: false,
        },
        {
          label: "行为数",
          prop: "bclick",
          ispass: false,
        },
        {
          label: "转化成本",
          prop: "conversion_num_cost",
          ispass: false,
        },
        {
          label: "付款成功数",
          prop: "event_order_paid",
          ispass: false,
        },
        {
          label: "付款成功金额",
          prop: "event_order_paid_purchase_amount",
          ispass: false,
        },
        {
          label: "平均千次曝光花费（元）",
          prop: "impression_1k_cost",
          ispass: false,
        },
        {
          label: "封面点击数",
          prop: "photo_click",
          ispass: false,
        },
        {
          label: "平均点击单价（元）",
          prop: "photo_click_cost",
          ispass: false,
        },
        {
          label: "封面点击率",
          prop: "photo_click_ratio",
          ispass: false,
        },
        {
          label: "3s 播放率",
          prop: "play_3s_ratio",
          ispass: false,
        },
        {
          label: "封面曝光数",
          prop: "show",
          ispass: false,
        },
      ],
      xAxisData: [],
      chartsCharge: [],
      chartsEvent_pay_purchase_amount:[],
      chartsEvent_pay:[],
      chartsConversion_num:[],
      lists: [
        {
          label: "素材曝光数",
          prop: "aclick",
          ispass: true,
        },
        {
          label: "花费（元）",
          prop: "charge",
          ispass: true,
        },
        {
          label: "转化数",
          prop: "conversion_num",
          ispass: true,
        },
        {
          label: "转化率",
          prop: "conversion_ratio",
          ispass: true,
        },
        {
          label: "付费次数",
          prop: "event_pay",
          ispass: true,
        },
        {
          label: "付费金额",
          prop: "event_pay_purchase_amount",
          ispass: true,
        },
        {
          label: "ROI",
          prop: "event_pay_roi",
          ispass: true,
        },
      ],
      seachid: "",
      seachtime: '',
      typelist: [{
        value: 1,
        label: '京东'
      }, {
        value: 2,
        label: '淘宝'
      }, {
        value: 3,
        label: '拼多多'
      }]
    };


  },
  watch: {
    check (newVal) {
      if (newVal) {
        var arr = this.checkList.filter((i) => newVal.indexOf(i) < 0); //未选中
        this.lists = []
        this.col.map((i) => {
          if (arr.indexOf(i.label) !== -1) {
            i.ispass = false;
          } else {
            i.ispass = true;
            if (i.ispass == true) {
              this.lists.push(i)

            }
          }
        })
        const newtr = document.querySelector(".el-table__header-wrapper tr");
        this.sortable = Sortable.create(newtr, {
          animation: 180,
          delay: 0,
          onEnd: (evt) => {
            if (evt.newIndex > 3) {
              const oldItem = this.lists[evt.oldIndex - 4];
              this.lists.splice(evt.oldIndex - 4, 1);
              this.lists.splice(evt.newIndex - 4, 0, oldItem);
            }
          },
        });

      }
    },
    tableData: {
      handler (newVal, oldVFal) {
        console.log(newVal, 323);
        newVal.forEach(item=>{
          this.xAxisData.push(item.account)
          this.chartsCharge.push(item.charge)
          this.chartsEvent_pay_purchase_amount.push(item.event_pay_purchase_amount)
          this.chartsEvent_pay.push(item.event_pay)
          this.chartsConversion_num.push(item.conversion_num)
        })
      }
    }
  },
  mounted () {

    //  this.col = []
    this.columnDrop();
    this.times()
  },
  methods: {
    costdrawChart () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("costmain"));
      // 指定图表的配置项和数据
      let option = {
        color: ['#91cc75', '#fac858', '#ee6666', '#73c0de', ],
        legend: {
          data: ["花费", "付费金额", "付费次数", "转化数"],
        },
         tooltip: {},
          yAxis: {},
        xAxis: {
          data: this.xAxisData
        },
         dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 0,
            end: 10,
            handleSize: 8
          },
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            type: 'slider',
            show: true,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 12,
            height: '70%',
            handleSize: 8,
            showDataShadow: false,
            left: '93%'
          }
        ],
        yAxis: {},
        series: [
          {
            name: '花费',
            type: 'bar',
            data: this.chartsCharge
          },
          {
            name: '付费金额',
            type: 'bar',
            data: this.chartsEvent_pay_purchase_amount
          },
          {
            name: '付费次数',
            type: 'bar',
            data: this.chartsEvent_pay
          },
          {
            name: '转化数',
            type: 'bar',
            data: this.chartsConversion_num
          }
        ]
      };
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    opened () {
      this.$nextTick(() => {
        this.costdrawChart();
      });
    },
    // 方法
    chuanid (seachid) {
      this.seachid = seachid;
    },
    times () {
      // this.loading = true;
      let nowyear = new Date().getFullYear();
      //月份是从0月开始获取的，所以要+1;
      let nowmonth = new Date().getMonth() + 1;
      //日
      let nowday = new Date().getDate();
      if (nowmonth <= 9) {
        let months = "0" + nowmonth;
        let time = nowyear + "-" + months + "-" + nowday;
        this.stat_time = time;
        this.end_time = time;
        this.seachtime = [this.stat_time, this.end_time];
        if (nowday <= 9) {
          let days = "0" + nowday;
          let time = nowyear + "-" + months + "-" + days;
          this.stat_time = time;
          this.end_time = time;
          this.seachtime = [this.stat_time, this.end_time];
        } else {
          let time = nowyear + "-" + months + "-" + nowday;
          this.stat_time = time;
          this.end_time = time;
          this.seachtime = [this.stat_time, this.end_time];
        }
      } else {
        let time = nowyear + "-" + nowmonth + "-" + nowday;
        this.stat_time = time;
        this.end_time = time;
        this.seachtime = [this.stat_time, this.end_time];
        if (nowday <= 9) {
          let days = "0" + nowday;
          let time = nowyear + "-" + nowmonth + "-" + days;
          this.stat_time = time;
          this.end_time = time;
          this.seachtime = [this.stat_time, this.end_time];
        } else {
          let time = nowyear + "-" + nowmonth + "-" + nowday;
          this.stat_time = time;
          this.end_time = time;
          this.seachtime = [this.stat_time, this.end_time];
        }
      }
      this.$axios
        .get("/api/account/getAccount", {
          stat_time: this.stat_time,
          end_time: this.end_time,
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.have = true;
            this.dont = false;

            for (var i = 0; i <= res.data.data.data.length; i++) {
              this.newtime = res.data.data.data[0].update_time;
              if (res.data.data.data[i].type_id == 1) {
                res.data.data.data[i].type_id = "京东";

              } else if (res.data.data.data[i].type_id == 2) {
                res.data.data.data[i].type_id = "淘宝";

              } else if (res.data.data.data[i].type_id == 3) {
                res.data.data.data[i].type_id = "拼多多";

              }
              this.tableData = res.data.data.data;
              this.pagetotal = this.tableData.length;
            }
          } else {
            this.have = false;
            this.dont = true;
          }
        })
        .catch((e) => { });
    },
    fenzutime (seachtime) {
      this.stat_time = seachtime[0];
      this.end_time = seachtime[1];
    },
    typechange (val) {
      this.order_sta = val
    },
    chaxun () {
      if (this.seachid == "") {
        if (this.order_sta == "") {
          this.$axios
            .get("/api/account/getAccount", {
              stat_time: this.stat_time,
              end_time: this.end_time,
            })
            .then((res) => {
              if (res.data.code == 1) {
                this.have = true;
                this.dont = false;

                for (var i = 0; i <= res.data.data.data.length; i++) {
                  this.newtime = res.data.data.data[0].update_time;
                  if (res.data.data.data[i].type_id == 1) {
                    res.data.data.data[i].type_id = "京东";

                  } else if (res.data.data.data[i].type_id == 2) {
                    res.data.data.data[i].type_id = "淘宝";

                  } else if (res.data.data.data[i].type_id == 3) {
                    res.data.data.data[i].type_id = "拼多多";

                  }
                  this.tableData = res.data.data.data;
                  this.pagetotal = this.tableData.length;
                }
              } else {
                this.have = false;
                this.dont = true;
              }
            })
            .catch((e) => { });
        } else {
          this.$axios
            .get("/api/account/getAccount", {
              stat_time: this.stat_time,
              end_time: this.end_time,
              type: this.order_sta
            })
            .then((res) => {
              if (res.data.code == 1) {
                this.have = true;
                this.dont = false;

                for (var i = 0; i <= res.data.data.data.length; i++) {
                  this.newtime = res.data.data.data[0].update_time;
                  if (res.data.data.data[i].type_id == 1) {
                    res.data.data.data[i].type_id = "京东";

                  } else if (res.data.data.data[i].type_id == 2) {
                    res.data.data.data[i].type_id = "淘宝";

                  } else if (res.data.data.data[i].type_id == 3) {
                    res.data.data.data[i].type_id = "拼多多";

                  }
                  this.tableData = res.data.data.data;
                  this.pagetotal = this.tableData.length;
                }
              } else {
                this.have = false;
                this.dont = true;
              }
            })
            .catch((e) => { });
        }
      } else {
        if (this.order_sta == "") {
          this.$axios
            .get("/api/account/getAccount", {
              account_id: this.seachid,
              stat_time: this.stat_time,
              end_time: this.end_time,
            })
            .then((res) => {
              if (res.data.code == 1) {
                this.have = true;
                this.dont = false;

                for (var i = 0; i <= res.data.data.data.length; i++) {
                  this.newtime = res.data.data.data[0].update_time;
                  if (res.data.data.data[i].type_id == 1) {
                    res.data.data.data[i].type_id = "京东";

                  } else if (res.data.data.data[i].type_id == 2) {
                    res.data.data.data[i].type_id = "淘宝";

                  } else if (res.data.data.data[i].type_id == 3) {
                    res.data.data.data[i].type_id = "拼多多";

                  }
                  this.tableData = res.data.data.data;
                  this.pagetotal = this.tableData.length;
                }
              } else {
                this.have = false;
                this.dont = true;
              }
            })
            .catch((e) => { });
        } else {
          this.$axios
            .get("/api/account/getAccount", {
              account_id: this.seachid,
              stat_time: this.stat_time,
              end_time: this.end_time,
              type: this.order_sta
            })
            .then((res) => {
              if (res.data.code == 1) {
                this.have = true;
                this.dont = false;

                for (var i = 0; i <= res.data.data.data.length; i++) {
                  this.newtime = res.data.data.data[0].update_time;
                  if (res.data.data.data[i].type_id == 1) {
                    res.data.data.data[i].type_id = "京东";

                  } else if (res.data.data.data[i].type_id == 2) {
                    res.data.data.data[i].type_id = "淘宝";

                  } else if (res.data.data.data[i].type_id == 3) {
                    res.data.data.data[i].type_id = "拼多多";

                  }
                  this.tableData = res.data.data.data;
                  this.pagetotal = this.tableData.length;
                }
              } else {
                this.have = false;
                this.dont = true;
              }
            })
            .catch((e) => { });
        }
      }
    },
    handleCurrentChange (val) {
      //拿到新的数据再渲染
      this.currentPage = val;
    },
    watch (scope) {
      console.log(scope)
    },
    columnDrop () {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          if (evt.newIndex > 3) {
            const oldItem = this.lists[evt.oldIndex - 4];
            this.lists.splice(evt.oldIndex - 4, 1);
            this.lists.splice(evt.newIndex - 4, 0, oldItem);
          }
        },
      });
    },
  },
};
</script>
<style>
.touch {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #409eff;
}
.icons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icons img {
  width: 18px;
  margin-right: 5px;
}
.right {
  width: 100%;
  height: 40px;
  display: flex !important;
  align-content: center;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>